<template>
  <div class="app-container">
    <div class="nav">banner管理— 发布</div>
    <div class="table-container">
      <div class="item">
        <el-radio v-model="radio" label="1">商品促销广告</el-radio>
        <el-radio v-model="radio" label="2">市场推广页面</el-radio>
      </div>
      <div class="item uploads">
        <p>
          <em>*</em>banner图
          <span class="tips">建议尺寸：750*400像素</span>
        </p>
        <div class="upload">
          <el-upload action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>
      </div>
      <el-form>
        <el-form-item label="关联商品" required>
          <el-select v-model="value" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form>
        <el-form-item label="启用状态" required>
          <el-radio v-model="enabledstate" label="1">备选项</el-radio>
          <el-radio v-model="enabledstate" label="2">备选项</el-radio>
        </el-form-item>
      </el-form>
      <el-form slot="footer" class="footerbtn">
        <el-button type="primary" @click="release" class="">发布</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import { updateById } from "@/api/banner";
export default {
  data() {
    return {
      radio: "1",
      bannerinfo: {},
      enabledstate: "1",
      dialogImageUrl: "",
      dialogVisible: false,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ],
      value: ""
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    init() {
      this.id = this.list = this.$route.query.id;
      updateById(this.id).then(res => {
        this.bannerinfo = res.data;
        console.log(res.data)
      });
    },
    release() {},
    cancel() {}
  }
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.app-container {
  background: #fff;
  min-height: 500px;
  .nav {
    font-size: 16px;
    padding: 0 !important;
    margin-bottom: 10px;
  }
  .table-container {
    .item {
      em {
        color: #ff0000;
        margin-right: 2px;
      }
      .tips {
        color: #dfdfdf;
        font-size: 12px;
      }
      .upload {
        padding-left: 80px;
        .el-upload--picture-card {
          width: 135px !important;
          height: 87px !important;
        }
      }
    }
    .item.uploads {
      margin-bottom: 20px;
    }
  }
}
</style>
